<template>
	<view>
		<view class="locality"><view class="title">当地必体验</view></view>
		<!-- tab -->
		<view class="menu-block">
			<block v-for="(item, index) in citytab" :key="index">
				<!-- 实现点击切换样式 -->
				<view :class="{ activetext: index == num }" @click="menubtn(index)">{{ item.name }}</view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	name: 'address',
	data() {
		return {
			citytab: [
				{
					name: '全部'
				},
				{
					name: '景点'
				},
				{
					name: '美食'
				},
				{
					name: '打卡'
				}
			],
			num: 0
		};
	},
	methods: {
		menubtn(index) {
			console.log(index);
			this.num = index;
		}
	}
};
</script>

<style scoped>
.locality {
	margin: 0 20upx;
}
.title {
	color: #292c33;
	font-size: 50upx;
}
.activetext {
	color: #4cd964;
	background: #ffdd00 !important;
	border: 1px solid #ffdd00 !important;
}
.menu-block view {
	background: #ffffff;
	border: 1px solid #c2c5cc;
	border-radius: 6upx;
	font-size: 25upx;
	color: #292c33;
	font-weight: bold;
	text-align: center;
	padding: 15upx;
	margin: 20upx;
}

.menu-block {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
}
</style>
